import { Tooltip } from 'antd';
import React from 'react';

const LeftDivs = (props) => {
  return (
    <div style={{ width: 120, userSelect: 'none' }} id={'leftModals'}>
      <div
        data-type="start"
        onMouseDown={(e) => props.startDrag(e, '开始')}
        style={{
          width: 120,
          height: 70,
          marginBottom: 15
        }}
      >
        <Tooltip title={'开始'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + "/ggeditor/form/start.png"} width="120" height="70" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="rect"
        onMouseDown={(e) => props.startDrag(e, '字段收集','#F1DAFF', '#F3E1FF','field')}
        style={{
          width: 120,
          height: 70,
          marginBottom: 15
        }}
      >
        <Tooltip title={'字段收集'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/form/field.png'} width="120" height="70" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="rect"
        onMouseDown={(e) => props.startDrag(e, '信息确认','#FFD7D3', '#FFE6E3','confirm')}
        style={{
          width: 120,
          height: 70,
          marginBottom: 15
        }}
      >
        <Tooltip title={'信息确认'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/form/confirm.png'} width="120" height="70" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="rect"
        onMouseDown={(e) => props.startDrag(e, 'APIs','#C3F4FF', '#D3F7FF','api')}
        style={{
          width: 120,
          height: 70,
          marginBottom: 15
        }}
      >
        <Tooltip title={'APIs'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/form/api.png'} width="120" height="70" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="polygon"
        onMouseDown={(e) => props.startDrag(e, '判断')}
        style={{
          width: 120,
          height: 70,
          marginBottom: 15
        }}
      >
        <Tooltip title={'判断'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/form/judge.png'} width="120" height="70" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="rect"
        onMouseDown={(e) => props.startDrag(e, '落表','#C6E6BB', '#CFECC5','store')}
        style={{
          width: 120,
          height: 70,
          marginBottom: 15
        }}
      >
        <Tooltip title={'落表'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/form/store.png'} width="120" height="70" draggable={false} />
        </Tooltip>
      </div>
      <div
        data-type="end"
        onMouseDown={(e) => props.startDrag(e, '结束')}
        style={{
          width: 120,
          height: 70,
          marginBottom: 15
        }}
      >
        <Tooltip title={'结束'} placement="right" getPopupContainer={() => document.getElementById('flowContent')}>
          <img src={staticPath + '/ggeditor/form/end.png'} width="120" height="70" draggable={false} />
        </Tooltip>
      </div>
    </div>
  )
}
export default LeftDivs
